<template>
    <div class="create">
        <div class="createTitle">创建装配工单</div>
        <el-form :model="form" ref="form" label-width="100px" size="mini">
            <el-form-item label="单据编号">
                <el-input v-model="form.code" placeholder="请输入，忽略将自动生成" class="code"></el-input>
            </el-form-item>
        </el-form>
        <div class="line"></div>

        <!-- 产品明细 -->
        <sales-Detail @productTableList='productTableList' ref="salesRef"></sales-Detail>

        <div class="btn">
            <el-button type="primary" plain size="small" @click="$router.push('/productionManagement/assembleOrder')">取消
            </el-button>
            <el-button type="primary" size="small" @click="handleProduct">保存</el-button>
        </div>
    </div>
</template>

<script>
    import {
        assemblyEdit
    } from '@/api/assemblyWorkOrderController'
    import salesDetail from './salesDetail.vue'
    export default {
        data() {
            return {
                form: {
                    code: '',
                    detailList:[]
                },
                list:[]
            }
        },
        components: {
            salesDetail
        },
        methods: {
            //装配工单
            assemblyEditFn(data) {
                assemblyEdit(data).then(res => {
                    if (res.code == 200) {
                        this.$router.push('/productionManagement/assembleOrder')
                        this.utils.showMsg('创建成功', 'success')
                    }
                })
            },

            //明细列表数据
            productTableList(list) {
                this.list = list
            },
            handleCustomField(customFieldVos){
                return customFieldVos.map(k => {
                    return {
                        customFieldId:k.customFieldId,
                        value:k.value
                    }
                })
            },
            //保存
            handleProduct() {
                this.list = this.$refs.salesRef.getFlattenTable();
                const {formatTime} = this.utils
                if (!this.list.length) {
                    this.utils.showMsg('自定义表单产品不能为空', 'error')
                    return
                }
                console.log(this.list);
                this.list.forEach(i => {
                    console.log(i);
                    this.form.detailList.push({
                        productId: i.productId ? i.productId : null,
                        parentLevel: i.parentId,
                        unitUsage:i.unitUsage,
                        level:i.level,
                        workOrderPlanNum: i.planedNumber,
                        planStartTime:formatTime(i.workOrderStartTimeAndEndTime[0],'yyyy-MM-dd hh:mm:ss'),
                        planEndTime:formatTime(i.workOrderStartTimeAndEndTime[1],'yyyy-MM-dd hh:mm:ss'),
                        customFieldVos:this.handleCustomField(i.customFieldVos)
                    })
                })
                this.assemblyEditFn(this.form)
            },
        }
    }
</script>

<style lang="less" scoped>
    .create {
        padding: 20px;
        overflow: auto;

        code {
            font-family: sans-serif;
        }

        .createTitle {
            font-size: 16px;
            color: #1f273d;
            padding-bottom: 20px;
        }

        .line {
            margin: 28px 0 24px 0;
            border-bottom: 1px solid #e8e8e8;
        }

        .btn {
            margin: 26px 0;
            text-align: center;

            /deep/ .el-button--primary span {
                margin-left: 0;
            }

            /deep/ .el-button {
                padding: 7px 35px;
            }
        }

        /deep/ .el-input.code {
            width: 300px;
        }
    }
</style>